<template>
    <div class="detail_box">
        <!-- 头部导航组件 -->
        <Appnavigatebar :title="'详情页'"></Appnavigatebar>
        <!-- 轮播图组件 -->
        <Myswiper :swiperArr='swiperArr'></Myswiper>
        <!--播放按钮 -->
        <div class="play_btn">
            <van-button icon="play-circle-o" size="small" round type="info" @click="showVideoFn">{{ videoDuration
            }}</van-button>
        </div>
        <!-- 视频播放窗口 -->
        <van-overlay :show="show">
            <div class="wrapper" @click.self="hideVideoFn">
                <video ref="videodom" controls preload="preload"
                    src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"></video>
            </div>
        </van-overlay>
        <!-- 商品详细信息 -->
        <p class="price">${{ currentObj.originprice }}元</p>
        <h3 class="proname">{{ currentObj.proname }}</h3>

        <!-- 商品导航 -->
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartTotalNum" @click="gotoCartFn" />
            <van-goods-action-button type="warning" text="加入购物车" @click="isshowsku = true" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
        <!-- 加入购物车的商品规格面板 -->
        <van-sku ref="sku" v-model="isshowsku" :sku="sku" :goods="goods" :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" />
    </div>
</template>

<script>
// 导入详情页接口
import { getdetaildata, addcartdata, getcartlistApi } from '@/api/detail'
// 引入头部导航组件
import Appnavigatebar from '@/components/Appnavigatebar.vue';
// 引入轮播图组件
import Myswiper from '@/components/Myswiper.vue';
// 引入组合式函数
import { isLoginFn } from '@/utils/common'
export default {
    data() {
        return {
            id: this.$route.params.id,
            swiperArr: [],  // 轮播图数组
            show: false,  // 是否显示模态框
            videoDuration: 0,  // 视频时长
            currentObj: {}, // 当前的商品对象信息
            isshowsku: false,  //是否显示商品规格面板
            sku: {
                tree: [],
                price: '1.00',
                stock_num: 227, // 商品总库存
                hide_stock: true // 是否隐藏剩余库存
            },
            goods: {
                // 默认商品 sku 缩略图
                picture: 'https://img01.yzcdn.cn/1.jpg'
            },
            cartTotalNum: 0 // 购物车总数据
        }
    },
    components: {
        Appnavigatebar,
        Myswiper
    },
    created() {
        // 初始化获取详情数据
        this.getdetailFn();
        // 初始化获取购物车数据
        this.getcartlistFn()
    },
    mounted() {
        // 当前路由信息对象
        // console.log(this);
        // 获取video时长

        let videoDom = this.$refs.videodom
        //console.log(videoDom);
        // 设置this的指向
        let that = this
        // canplay  是video标签自带的时间,该事件在video中的视频资源已经加载完毕时自动触发 
        // loadeddata  // 加载完毕时自动触发
        videoDom.onloadeddata = function () {
            // console.log(that.$refs.videodom.duration);
            that.videoDuration = that.$refs.videodom.duration + 's'
        }
    },
    methods: {
        async getdetailFn() {
            let res = await getdetaildata({
                id: this.id
            })
            // console.log(res);
            this.swiperArr = res.data.banners[0].split(',')
            //console.log(this.swiperArr);
            this.swiperArr = this.swiperArr.map((item, index) => {
                return { img: item, bannerid: index }
            })

            this.currentObj = res.data

            // 给sku商品规格面板中的商品信息赋值
            // 赋值商品价格
            this.sku.price = this.currentObj.originprice
            // 赋值库存
            this.sku.stock_num = this.currentObj.stock
            // 赋值缩略图
            this.goods.picture = this.currentObj.img2
        },
        // 点击播放按钮
        showVideoFn() {
            this.show = true;
            // 获取 video标签
            // console.log(this.$refs.videodom);
            this.$refs.videodom.play()
        },
        // 点击隐藏模态框
        hideVideoFn() {
            // console.log('隐藏');
            this.show = false
            this.$refs.videodom.pause()
        },
        // 点击立即购买
        onBuyClicked() {
            console.log('立即购买');
        },
        // 加入购物车
        onAddCartClicked() {
            console.log('加入购物车');
            //获取了商品的数量
            // console.log(this.$refs.sku.getSkuData().selectedNum);
            addcartdata({
                userid: this.$store.state.userid,
                proid: this.currentObj.proid,
                num: this.$refs.sku.getSkuData().selectedNum
            }).then(res => {
                //console.log('res', res);
                //隐藏商品面板
                this.isshowsku = false;
                // 提示信息
                this.$toast({
                    type: res.code == 200 ? 'success' : 'fail',
                    message: res.message,
                    duration: 1000,
                });
                // 重新获取购物车数据
                this.getcartlistFn()

            })
        },
        // 获取购物车商品数据
        getcartlistFn() {
            getcartlistApi({
                userid: this.$store.state.userid
            }).then(res => {
                console.log('res', res);
                if (res.code == 200) {
                    this.cartTotalNum = res.data.length
                } else {
                    this.cartTotalNum = 0
                }

            })
        },
        // 点击购物车图标跳转到购物车页面
        gotoCartFn() {
            // 01: 先判断该用户是否登录., 登录则可以跳转到购物车否则提示先登录
            this.$router.push('/cart')

            // if (isLoginFn()) {
            //     this.$router.push('/cart')
            // } else {
            //     this.$toast({
            //         type: 'fail',
            //         message: '请先登录',
            //         onClose: () => {
            //             this.$router.push('/login')
            //         }
            //     })
            // }
        }
    }
}
</script>
<style lang="less" scoped>
.detail_box {
    position: relative
}

.play_btn {
    position: absolute;
    left: 50%;
    top: 350px;
    transform: translateX(-50%);
}

// 模态框样式
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

video {
    width: 350px;
    margin: 0 auto;
    background-color: #fff;
}

.price {
    color: red;
    font-size: 20px;
}

.proname {
    font-size: 18px;
}
</style>